<template>
  <!--信函催收-->
  <div class="page">
    <data-box ref="databox" :params="params" :server="server.search" row-key="letterAcc" autoSearch showExpend>
      <!--搜索区-START-->
      <template slot="mustShowInput">
        <el-form-item label="客户名称:" v-role="0x030301" prop="custName">
          <el-input v-model="params.custName"></el-input>
        </el-form-item>
        <el-form-item label="催收员" v-role="0x030305" prop="cupoName">
          <el-input v-model="params.cupoName"></el-input>
        </el-form-item>
      </template>
      <template slot="input">
        <div class="inline-box">
          <el-form-item label="逾期天数" prop="overDayMin" :rules="[
            { validator: validate.validateMin(params.overDayMax), trigger: 'blur' }
          ]" v-role="0x030302">
            <el-input v-model.number="params.overDayMin" type="number" :min="0"></el-input>
          </el-form-item>
          <el-form-item label="-" prop="overDayMax" :rules="[
            { validator: validate.validateMax(params.overDayMin), trigger: 'blur' }
          ]" v-role="0x030302">
            <el-input v-model.number="params.overDayMax" type="number" :min="0"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="批次号" v-role="0x030303">
          <el-input v-model="params.cupoBatch"></el-input>
        </el-form-item>
        <el-form-item label="委托方" v-role="0x030304" prop="prinId">
          <el-select v-model="params.prinId" placeholder="请选择" clearable>
            <el-option v-for="{index,prinId,prinName} in this.dataName" :key="index" :label="prinName" :value="prinId">
            </el-option>
          </el-select>
        </el-form-item>
      </template>
      <!--搜索区-END-->

      <!--按钮区-START-->
      <template slot="button">
        <el-button @click="batchPrintClick" v-role="0x030307">批量打印</el-button>
      </template>
      <!--按钮区-END-->

      <!--数据区-STAR-->
      <template slot="column">
        <el-table-column type="selection" width="30"></el-table-column>
        <el-table-column type="index" label="序号" width="30"></el-table-column>
        <el-table-column prop="cupoCasenum" label="案件编号" min-width="100"></el-table-column>
        <el-table-column prop="custName" label="客户姓名" min-width="90"></el-table-column>
        <el-table-column prop="cupoAmt" label="案件金额" min-width="90"></el-table-column>
        <el-table-column prop="cupoPaystatus" label="还款状态" min-width="80"></el-table-column>
        <el-table-column prop="cupoOverday" label="逾期天数" min-width="80"></el-table-column>
        <el-table-column prop="cupoBatch" label="批次号" min-width="90"></el-table-column>
        <el-table-column prop="cupoPrincipal" label="委托方" min-width="110"></el-table-column>
        <el-table-column prop="cupoName" label="催收员" min-width="100"></el-table-column>
        <el-table-column prop="cupoStatus" label="状态" min-width="90">
          <template scope="scope">
            <el-popover trigger="hover" placement="bottom" v-if="scope.row.cupoStatus===57">
              <p class="text-left">还款金额: {{ getRepayNum(scope) }}元</p>
              <p class="text-left">还款日期: {{ getRepayDate(scope) }}</p>
              <div slot="reference" class="name-wrapper">
                <el-button type="text" style="color:green">{{scope.row.cupoStatus | typeCodeConvert('0018')}}</el-button>
              </div>
            </el-popover>
            <span v-else>{{scope.row.cupoStatus | typeCodeConvert('0018')}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="cupoGettime" label="案件流入日期" min-width="100">
        </el-table-column>
        <el-table-column label="操作" min-width="90">
          <template scope="scope">
            <el-button @click="printLetterClick(scope)" type="text" size="small" v-role="0x030306">打印信函</el-button>
          </template>
        </el-table-column>
      </template>
      <!--数据列区域-END-->
    </data-box>
    <!--打印弹出框-->
    <el-dialog title="逾期催收信函打印" v-model="printLetterClickHandle" size="auto">
      <letter-print ref="LetterPrint"></letter-print>
    </el-dialog>
    <!--批量打印弹出框-->
    <el-dialog title="逾期催收信函批量打印" @open="batchData" v-model="batchPrintClickHandle" size="small">
      <letter-batch-print ref="letterBatchPrint"></letter-batch-print>
    </el-dialog>
  </div>
</template>
<script>
  import DataBox from '@/components/DataBox'
  import net from '@/util/net'
  import servers from '@/config/servers'
  import { validateMin, validateMax, getBrowserType, getDate, toThousands } from '@/util/common'
  import LetterPrint from '@/views/smart-acc/LetterPrint'
  import LetterBatchPrint from '@/views/smart-acc/LetterBatchPrint'
  export default {
    name: 'letter-acc',
    data() {
      return {
        server: {
          search: servers.SmartAcc.get_smart_list
        },
        params: {
          custName: '',
          cupoBatch: '',
          prinId: '',
          cupoName: '',
          cupoCasenum: '',
          cupoAmt: '',
          overDayMin: '',
          overDayMax: '',
          cupoPrincipal: '',
          cupoPaystatus: '',
          createTime: '',
          sort: 'cupoOverday,asc'
        },
        validate: {
          validateMin,
          validateMax
        },
        dataName: [],
        printLetterClickHandle: false,
        multipleSelection: [],
        batchPrintClickHandle: false,
        repayArr: []
      }
    },
    methods: {
      /**
       * 获取承诺还款数据
       */
      getRepayData() {
        net.send({
          server: servers.CaseManage.get_acc_recevice_pool_by_token,
          cupoRectype: '69'
        }).then((data) => {
          this.repayArr = data
        }, err => {
          this.$message({
            type: 'info',
            message: err.reason
          })
        })
      },
      /**
       * 获取承诺还款的金额
       */
      getRepayNum(scope) {
        let item = this.repayArr.find(x => x.cupoId === scope.row.cupoId)
        if (item) {
          return toThousands(item.promiseAmt.toFixed(2))
        }
      },
      /**
       * 获取承诺还款的日期
       */
      getRepayDate(scope) {
        let item = this.repayArr.find(x => x.cupoId === scope.row.cupoId)
        if (item) {
          return item.promiseDate
        }
      },
      /**
       * 批量数据获取
       */
      batchData() {
        this.$nextTick(() => {
          this.$refs['letterBatchPrint'].batchDataSend(this.multipleSelection)
        })
      },
      /**
       * 点击批量打印弹出框
       */
      batchPrintClick(scope) {
        this.multipleSelection = this.$refs['databox'].getCurrentSelection()
        if (this.multipleSelection.length === 0) {
          this.$alert('请选择需要打印的案件', '提示', {
            confirmButtonText: '确定'
          })
        } else {
          this.batchPrintClickHandle = true
        }
        this.$store.commit('updatePrintInfo', [])
        this.$store.commit('printSomeSymbol', { moneySymbol: '￥', yuanSymbol: '元', daySymbol: '天' })
        this.$store.commit('printYmdDate', { year: getDate()[0], month: getDate()[1], day: getDate()[2] })
      },
      /**
       * 点击打印信函弹出框
       */
      printLetterClick(scope) {
        var rowArr = []
        rowArr.push(scope.row)
        this.$store.commit('updatePrintInfo', rowArr)
        this.$store.commit('printSomeSymbol', { moneySymbol: '￥', yuanSymbol: '元', daySymbol: '天' })
        this.$store.commit('printYmdDate', { year: getDate()[0], month: getDate()[1], day: getDate()[2] })
        this.printLetterClickHandle = true
      }
    },
    mounted() {
      this.getRepayData()
      net.send({
        server: servers.ApprovalManage.get_all_pricipal
      }).then((data) => {
        this.dataName = data
        console.log(data)
      }, err => {
        console.log(err)
      })
    },
    activated() {
      var browserType = getBrowserType()
      if (browserType === 'chrome') {
        this.$store.commit('browserType', { printPageHeight: '1025px' })
      }
      if (browserType === 'opera') {
        this.$store.commit('browserType', { printPageHeight: '1025px' })
      }
      if (browserType === '360') {
        this.$store.commit('browserType', { printPageHeight: '1015px' })
      }
      if (browserType === 'firefox') {
        this.$store.commit('browserType', { printPageHeight: '1050px' })
      }
    },
    components: {
      DataBox,
      LetterPrint,
      LetterBatchPrint
    }
  }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .inline-box {
    display: inline-block;
    vertical-align: top;
  }

</style>
